<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="shortcut icon" href="${ctp}/assets/img/youu.png" type="image/x-icon">

    <title>:: YOUU友游网  :: 不一样的世界</title>

    

    <!-- style -->

    <link href="${ctp}/assets/css/mainStyle.css" rel="stylesheet" type="text/css">

    <!-- Bootstrap -->

    <link href="${ctp}/assets/vendor/bootstrap-3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css">

    <!-- carousel -->

    <link href="${ctp}/assets/css/owl.carousel.css" rel="stylesheet" type="text/css">

    <!-- responsive -->

    <link href="${ctp}/assets/css/responsive.css" rel="stylesheet" type="text/css">

    <!-- font-awesome -->

    <link href="${ctp}/assets/css/font-awesome.min.css" rel="stylesheet" type="text/css">

    <script type="text/javascript" src="${ctp}/assets/vendor/jQuery/jquery-3.2.1.min.js"></script>
    
    <!-- 百度地图定位 -->
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=PX4VobUl10S6FGruZ11ReAda3DA6maO0"></script>

    <script type="text/javascript" src="${ctp}/assets/vendor/layer/layer.js"></script>
    <link href="${ctp}/assets/vendor/layui/css/layui.css" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="${ctp}/assets/vendor/layui/layui.js"></script>
    
    <style type="text/css">
        .scenics_img {
            width: 600px;
            height: 350px;
        }
    </style>
  </head>

   <body class="module-home" data-spy="scroll" data-target=".navbar">



    <!-- header -->

        <header role="header" class="header-top" id="headere-top">

            <div class="header-fixed-wrapper" role="header-fixed">

                <div class="container">

                    <!-- hgroup -->

                    <hgroup class="row">

                        <!-- logo -->

                        <div class="col-xs-5 col-sm-2 col-md-2 col-lg-2">

                            <h1>

                                <a href="" title="Rooky"><img src="${ctp}/assets/img/logo.png" alt="Rooky" title="Rooky"/></a>

                            </h1>

                        </div>

                        <!-- logo -->

                        <!-- nav -->

                        <nav role="navigation" class="col-xs-12 col-sm-10 col-md-10 col-lg-10 navbar navbar-default">

                            <div class="navbar-header">

                                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">

                                    <span class="sr-only">Toggle navigation</span>

                                    <span class="icon-bar"></span>

                                    <span class="icon-bar"></span>

                                    <span class="icon-bar"></span>

                                </button>

                            </div>

                            <div id="navbar" class="navbar-collapse collapse">            

                                <ul class="nav navbar-nav">                   

                                    <li class="active"><a href="${ctp}/index.jsp#headere-top" title="Home">首页</a></li>

                                    <li><a href="${ctp}/index.jsp#section-one" title="Overview">网站简介</a></li>

                                    <li><a href="${ctp}/index.jsp#section-two" title="Features">博文精选</a></li>

                                    <li><a href="${ctp}/index.jsp#section-three" title="Pricing">门票/优惠券</a></li>

                                    <li><a href="${ctp}/index.jsp#section-four" title="Team">开发者团队</a></li>

                                    <li><a href="${ctp}/index.jsp#section-five" title="Contact">订阅</a></li>

                                    <li><a href="${ctp}/index.jsp#section-six" title="Join Us">加入我们</a></li>            

                                </ul>

                            </div>

                        </nav>

                        <!-- nav -->

                    </hgroup>

                    <!-- hgroup -->

                  </div>

            </div>

           

            <!-- banner Text -->   

                

            <!-- banner image -->

            <figure>
                <div style="background-image: url('http://ww1.sinaimg.cn/large/8e24145egy1fifxdtbv4cj21hc0ncdp8.jpg');height: 140px;"></div>
            </figure>
            
            <!-- banner image -->

        </header>

    <!-- header -->

    

    <!-- main -->

        <main role="main" id=" main-wrapper">

            <!--   景点门票展示 -->
			   <div id="scenics_list" style="width: 100%;margin-top: 20px;">
			     <form class="layui-form" action="">
					  <div class="layui-form-item">
					  
					     <div class="layui-inline" style="float: left; margin-left: 20px;">
						      <div class="layui-input-inline">
						        <input id="select_key_input" name="select_key" type="tel" autocomplete="off" class="layui-input" value="${param.select_key}">
						      </div>
						      <button class="layui-btn select_scenics_btn">搜一搜</button>
						      <div id="key_div" style="border: 1px solid #F0F0F0;width: 190px; height: auto;margin-top: 2px;display: none;">
						          <ul>
						              <li id="key_1" class="key_li" style="border-bottom: 1px solid #F0F0F0;height: 35px;"></li>
						              <li id="key_2" class="key_li" style="border-bottom: 1px solid #F0F0F0;height: 35px;"></li>
						              <li id="key_3" class="key_li" style="border-bottom: 1px solid #F0F0F0;height: 35px;"></li>
						              <li id="key_4" class="key_li" style="height: 35px;"></li>
						          </ul>
						      </div>
						 </div>
					  
					     <div class="layui-inline" style="float: right; margin-right: 20px;">
					          排序方式：
					          <button name="order" value="dist" id="dist_order" class="layui-btn layui-btn-mini">离我最近</button>
					          <button name="order" value="price" id="price_order" class="layui-btn layui-btn-normal layui-btn-mini">按照价格</button>
					          <button id="hot_order" value="hot" name="order" class="layui-btn layui-btn-mini layui-btn-danger">当前最热</button>
					          <button id="evaluate_order" value="evaluate" name="order" class="layui-btn layui-btn-mini layui-btn-warm">评价最高</button>
                         </div>
					  </div>
				 </form>
			   </div>
			   <hr/>
                
<!--                 表单 -->
                <div class="layui-form" style="margin-top: 20px;margin-left: 20px; margin-right: 20px;">
				  <table class="layui-table" lay-skin="line" >
				    <tbody>
				      <c:forEach items="${scenics}" var="scenic">
				          <tr>
	                        <td><img class="scenics_img" onerror="this.src='http://ww1.sinaimg.cn/large/8e24145egy1fifxdtbv4cj21hc0ncdp8.jpg'" src="/youu-restapi${scenic.pictureUrl}"></td>
	                        <td style="margin-top: -500px;">
	                           <ul>
	                               <li style="font-size: 20px;margin-top: 0px;">${scenic.scenicName}</li>
	                               <li style="margin-top: 10px;">简介：${scenic.scenicDetails}</li>
	                               <li style="margin-top: 10px;">地址：${scenic.province}省 ${scenic.city}市 ${scenic.scenicLocation}</li>
	                               <li style="margin-top: 10px;">原价：<strike style="">${scenic.ticketPrice}</strike>元</li>
	                               <li style="margin-top: 10px;">现价：${scenic.ticketPrice - 30}元</li>
	                               <li style="margin-top: 10px;"><button class="layui-btn">立即购买</button></li>
	                           </ul>
<%-- 	                            <div style="font-size: 20px;margin-top: 0px;">${scenic.scenicName}</div> --%>
<%-- 	                            <div style="margin-top: 10px;">简介：${scenic.scenicDetails}</div> --%>
<%-- 	                            <div style="margin-top: 10px;">地址：${scenic.province}省 ${scenic.city}市 ${scenic.scenicLocation}</div> --%>
<%-- 	                            <div style="margin-top: 10px;">原价：<strike style="">${scenic.ticketPrice}</strike>元</div> --%>
<%-- 	                            <div style="margin-top: 10px;">现价：${scenic.ticketPrice - 30}元</div> --%>
<!-- 	                            <div style="margin-top: 20px;"><button class="layui-btn">立即购买</button></div> -->
	                        </td>
	                      </tr>
				      </c:forEach>
				    </tbody>
				  </table>
				</div>
				
<!-- 				分页 -->
                
           
           <!-- footer -->

           <footer role="footer" class="footer text-center">

                <div class="container">

                    <!-- socil-icons -->

                    <section role="socil-icons" class="socil-icons">

                        <a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a>

                        <a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a>

                        <a href="#"><i class="fa fa-linkedin" aria-hidden="true"></i></a>

                        <a href="#"><i class="fa fa-google-plus" aria-hidden="true"></i></a>

                        <a href="#"><i class="fa fa-dribbble" aria-hidden="true"></i></a>

                        <a href="#"><i class="fa fa-behance" aria-hidden="true"></i></a>

                    </section>

                    <!-- socil-icons -->

                    <!-- nav -->

                    <nav role="footer-nav">

                        <a href="#">Terms of Use </a> 

                        <a href="#">Privacy Policy</a>

                    </nav>

                    <!-- nav -->

                    <p class="copy">&copy; 2017 Sartr. All rights reserved. <a href="http://youu.08tk.cn/" target="_blank" title="友游网">友游网</a></p>

                </div>

           </footer>

           <!-- footer -->

        </main>

    <!-- main -->
  </body>
  <script type="text/javascript">
  
      //关键字联想
      var old_select_key = $("#select_key_input").val();
      $("#select_key_input").keyup(function() {
    	  var select_key = $("#select_key_input").val();
    	  $.ajax({
    		  url: "/youu-restapi/show/search/key_guess",
    		  dataType: 'json',
    		  type: 'get',
    		  data: "key=" + select_key + "&before_key=" + old_select_key,
    		  success: function(data) {
                  if (select_key == "") $("#key_div").css("display", "none");
                  else $("#key_div").css("display", "");
                  if (data.s == 0) return false;
                  old_select_key = select_key;
    			  $.each(data.s, function(index, key) {
    				  if (index > 4) return false;
    				  $("#key_" + index).text(key);
                  });
    		  },
    		  error: function(XMLHttpRequest, textStatus, errorThrown) {
    		  }
    	  });
      });
      
      $(".key_li").click(function() {
    	  $("#select_key_input").val($(this).text());
    	  $(".select_scenics_btn").click();
      });
      
      $(".key_li").mouseenter(function() {
    	  $(".key_li").css("background-color", "");
    	  $(this).css("background-color", "#F0F0F0");
      });
  </script>
</html>